<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="__CSS__/bootstrap.min.css">
    <title>帖子详情</title>
    <style type="text/css">
        .container_center{border-bottom: 15px solid rgb(242, 242, 242);}
        .navbar_bottom_container{text-align: center;padding-top:10px;}
        .navbar_bottom_container span{font-size: 20px;display: inline-block;width:30%;}
        .container_center_user_left{float: left;}
        .container_center_user_left span{font-size: 15px;}
        .container_center_user_right{float: right;}
        .container_center_user_right span{font-size: 15px;}
        .demo_line_02{
            height: 1px;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .demo_line_02 span{
            position: relative;
            top: -8px;
            background: #fff;
            padding: 0 20px;
        }
        .container_handle_tie span{font-size: 25px;display: inline-block;width: 30%;height: 50px;padding-top: 10px;}
        .container_handle_tie_icon_left{float: left;width: 10%;}
        .container_handle_tie_icon_right{float: left;width: 90%;text-align: right;}
        .handle_tie_font{font-size: 14px;display: inline;}
        .contents{padding: 4px 0px 10px; overflow: hidden; line-height: 25px;text-align: justify; font-size: 17px;}
    </style>
    <script type="text/javascript" src="__JS__/jquery.min.js"></script>
    <script type="text/javascript" src="__JS__/layer.js"></script>
</head>
<body style="padding-bottom: 100px;">
<!-- 顶部固定导航 -->
<nav class="navbar navbar-default" style="padding-top: 5px;background-color: rgb(66, 185, 131);font-size: 25px;color: white;">
    <div class="container navbar_container">
        <div style="float: left;width: 30%;">
            <span class="glyphicon glyphicon-chevron-left"><a href="{:U('Home/Index/index')}" style="color: #ffffff;text-decoration: none;">首页</a></span>
        </div>
        <div style="float:left;width: 70%;text-align: center;">
            <span>理工info</span>
        </div>
        <div style="clear:both;"></div>
    </div>
</nav>
<!-- 中间的帖子列表 -->
<div class="container container_center">
    <!-- 发帖人信息 -->
    <div class="container_center_user_left">
        <span><img
            <?php if($datas['is_show_name']==0):?>
                <?php if($datas['user_sex']==2):?>
                     src="__IMG__/2.jpg"
                <?php else:?>
                     src="__IMG__/0.jpg"
                <?php endif;?>
            <?php else:?>
            <?php if($datas['headimgurl'] != ''):?>
                src="<?php echo $datas['headimgurl'];?>"
              <?php else:?>
                 src="__IMG__/no.jpg"
             <?php endif;?>
            <?php endif;?>
                style="width: 30px;height: 30px;border-radius: 50%;"></span>
        <span><eq name="datas.is_show_name" value="1"><?php echo $datas['user_name'];?><else/>某</eq>同学 -
            <?php if($datas['user_sex']==0):?>
                未知
            <?php elseif($datas['user_sex']==1):?>
                男
            <?php elseif($datas['user_sex']==2):?>
                女
            <?php endif;?>            
        </span>
    </div>
    <!-- 发帖时间 -->
    <div class="container_center_user_right" style="height: 40px;padding-top: 5px;"><?php echo date('Y-m-d H:i:s',$datas['add_time']);?></div>
    <div style="clear: both;"></div>
    <!-- 发帖具体内容 -->
    <div class="contents"><?php echo $datas['content'];?></div>
    <!-- 对帖子的操作 -->
    <div class="demo_line_02"></div>
    <div class="container container_handle_tie">
        <!-- 举报 -->
        <div class="container_handle_tie_icon_left">
            <span class="glyphicon glyphicon-bell" aria-hidden="true" tie_id="<?php echo $datas['message_id'];?>"></span>
        </div>
        <!-- 点赞、评论 -->
        <div class="container_handle_tie_icon_right">
            <?php if($datas['like_flag']>0):?>
                <span class="glyphicon glyphicon-heart-empty" flag="1" tie_id="<?php echo $datas['message_id'];?>" style="color: red;" aria-hidden="true" onclick="click_like(this)"></span>
            <?php else:?>
                <span class="glyphicon glyphicon-heart-empty" flag="0" tie_id="<?php echo $datas['message_id'];?>" aria-hidden="true" onclick="click_like(this)"></span>
            <?php endif;?>
            <span style="font-size: 14px;display: inline;"><?php echo $datas['like_num'];?></span>
            <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
            <span style="font-size: 14px;display: inline;" id="comment_num"><?php echo $datas['comment_num'];?></span>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<!-- 评论板块 -->
<div class="comment_contents">

</div>
<!-- 底部导航 -->
<nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: white;">
    <div class="container navbar_bottom_container" style="border-top: 5px solid rgb(242, 242, 242);">
        <form>
            <div style="height: 100%;">
                <div style="float:left;width: 70%;">
                    <textarea id="textarea" class="form-control"></textarea>
                </div>
                <div style="float:right;" class="frame">
                    <button class="btn btn-lg btn-success" id="sub">发送</button>
                </div>
                <div style="clear: both;"></div>
            </div>
        </form>
    </div>
</nav>
<!--JS版块-->
<script type="text/javascript">
    $(function(){
        commentAjax();
    });
    //异步 加载评论
    function commentAjax(){
        var id  =   "<?php echo I('get.id');?>";
        $.ajax({
            type:'get',
            url:"{:U('Home/Index/ajaxComment')}",
            data:{id:id},
            dataType:'html',
            success:function(html){
                $('.comment_contents').html('');
                $('.comment_contents').append(html);
            }
        });
    }
    //用户 发送评论
    $("#sub").click(function(){
        var contents    =   $("#textarea").val();
        var id          =   "<?php echo I('get.id');?>";

        if(contents.length<1){
            layer.open({
                content: '评论信息不能为空!!!'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return false;
        }
        if(contents.length>200){
            layer.open({
                content: '评论信息不能超过200字!!!'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return false;
        }

        $.ajax({
            type:'post',
            url:"{:U('Home/Index/addComment')}",
            data:{msg_id:id,content:contents},
            dataType:'json',
            success:function(res){
                if(res.state!=1){   //评论失败
                    layer.open({
                        content: res.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    //同时 让该帖子的评论数+1
                    var temp    =   parseInt($("#comment_num").text());
                    $("#comment_num").text(temp+1);
                    commentAjax();
                }
            }
        });
    });
    //帖子点赞
    function click_like(obj){
        var tie_id  =   $(obj).attr('tie_id');
        if($(obj).attr('flag')==1){ //已经点赞过了
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/not_like')}",
                data:{id:tie_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{
                        $(obj).css('color','');
                        $(obj).attr('flag',0);
                        var number  =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(number-1);
                    }
                }
            });
        }else{
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/like')}",
                data:{id:tie_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{
                        $(obj).css('color','red');
                        $(obj).attr('flag',1);
                        var number  =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(number+1);
                    }
                }
            });
        }
    }
    //评论点赞
    function comment_like(obj){
        var comment_id  =   $(obj).attr('data-comment-id');
        var message_id  =   $(obj).attr('data-message-id');
        var user_id  =   $(obj).attr('data-uid-id');

        if($(obj).attr('flag')==1){
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/NotuserLikeComment')}",
                data:{comment_id:comment_id,message_id:message_id,user_id:user_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){   //评论点赞失败
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{  //点赞成功
                        $(obj).css('color','');
                        var temp_num    =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(temp_num-1);
                        $(obj).attr('flag',0);
                    }
                }
            });
        }else{
            $.ajax({
                type:'post',
                url:"{:U('Home/Index/userLikeComment')}",
                data:{comment_id:comment_id,message_id:message_id,user_id:user_id},
                dataType:'json',
                success:function(res){
                    if(res.state!=1){   //评论点赞失败
                        layer.open({
                            content: res.msg
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                    }else{  //点赞成功
                        $(obj).css('color','red');
                        var temp_num    =   parseInt($(obj).next('span').text());
                        $(obj).next('span').text(temp_num+1);
                        $(obj).attr('flag',1);
                    }
                }
            });
        }
    }
    //举报 评论
    $('.glyphicon-bell').click(function(){
        layer.open({
            content: '<div><button type="button" onclick="jubao()" class="btn btn-warning" style="width: 90%;">举  报</button></div>'
            ,skin: 'footer'
        });
    });
    function jubao(){
        var tie_id  =   $('.glyphicon-bell').attr('tie_id');
        location.href="{:U('Home/Index/jubao','',false)}/tie_id/"+tie_id;
    }
</script>
</body>
</html>